﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="../knockout-3.0.0.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
</head>
<body>
    Greeting:
    <input data-bind="value: message" />
    <h1 data-bind="text: message.shouty"></h1>
    <script>
        ko.extenders.shoutyCase = function (target, suffix) {
            target.shouty = ko.computed(function () {
                if (target()) {
                    return target().toUpperCase() + suffix;
                }
                return '';
            });
            return target;
        };

        var viewModel = {
            message: ko.observable().extend({ shoutyCase: '!!!' })
        };

        ko.applyBindings(viewModel);
    </script>
</body>
</html>